<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8"/>
    <meta name="author" content="EdieLei"/>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport">
    <title>商户资料填写</title>
    <style>
        #photo {
            width: 100px;
            height: 100px;
            margin: auto;
            margin-top: 100px;
            background: #0cc;
            border-radius: 100px;
        }

        #photo img {
            width: 100px;
            height: 100px;
            border-radius: 50px;
        }
        .loadEffect{
            width: 100px;
            height: 100px;
            /*position: relative;*/
            margin: 0 auto;
            margin-top:100px;
            position:fixed;
            left:36%;
            z-index:9999;
        }
        .loadEffect span{
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: lightgreen;
            position: absolute;
            -webkit-animation: load 1.04s ease infinite;
        }
        @-webkit-keyframes load{
            0%{
                opacity: 1;
            }
            100%{
                opacity: 0.2;
            }
        }
        .loadEffect span:nth-child(1){
            left: 0;
            top: 50%;
            margin-top:-8px;
            -webkit-animation-delay:0.13s;
        }
        .loadEffect span:nth-child(2){
            left: 14px;
            top: 14px;
            -webkit-animation-delay:0.26s;
        }
        .loadEffect span:nth-child(3){
            left: 50%;
            top: 0;
            margin-left: -8px;
            -webkit-animation-delay:0.39s;
        }
        .loadEffect span:nth-child(4){
            top: 14px;
            right:14px;
            -webkit-animation-delay:0.52s;
        }
        .loadEffect span:nth-child(5){
            right: 0;
            top: 50%;
            margin-top:-8px;
            -webkit-animation-delay:0.65s;
        }
        .loadEffect span:nth-child(6){
            right: 14px;
            bottom:14px;
            -webkit-animation-delay:0.78s;
        }
        .loadEffect span:nth-child(7){
            bottom: 0;
            left: 50%;
            margin-left: -8px;
            -webkit-animation-delay:0.91s;
        }
        .loadEffect span:nth-child(8){
            bottom: 14px;
            left: 14px;
            -webkit-animation-delay:1.04s;
        }
    </style>
    {js href="/static/bootstrap/js/bootstrap.min.js" /}
    {js href="/static/js/jquery-2.1.1.min.js" /}
    {css href="/static/bootstrap/css/bootstrap.min.css" /}
</head>
<body>
    <div class="loadEffect" style="display:none">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
</div>
<div class="container-fluid">
    <!-- <form class="form-horizontal" javascript> -->
        <div class="form-group">
            <label for="shopname" class="col-sm-2 control-label">店铺名称</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="shopname" id='shopname' placeholder="请输入店铺名称">
            </div>
        </div>
        <div class="form-group">
            <label for="manage" class="col-sm-2 control-label">负责人姓名</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="manage" id="manage" placeholder="请输入负责人姓名">
            </div>
        </div>
        <div class="form-group">
            <label for="idNumber" class="col-sm-2 control-label">负责人身份证号码</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="idNumber" id="idNumber" placeholder="请输入负责人身份证号码">
            </div>
        </div>
        <div class="form-group">
            <label for="mobile" class="col-sm-2 control-label">负责人手机号</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="mobile" name="mobile" placeholder="请输入负责人手机号">
            </div>
        </div>
        <div class="form-group">
            <label for="category_id" class="col-sm-2 control-label">店铺类型</label>
            <div class="col-sm-10">
                <select class="form-control" name="category_id" id='category_id'>
                    <option value ="">请选择类型</option>
                    {volist name="category" id="vo"}
                        <option value="{$vo.id}">{$vo.name}</option>
                        {/volist}
                </select>
            </div>
        </div>
<!--         <div class="form-group">
            <label for="province" class="col-sm-2 control-label">请选择地址</label>
            <div class="col-sm-10">
                <div class="col-xs-4">
                    <select class="form-control" name="province" id='province'
                            onChange="getAreas(this.value,'city','3');">
                        <option value="">请选择省份</option>
                        {volist name="area" id="vo"}
                        <option value="{$vo.area_id}" {if condition="($vo.area_type == 1)" }{
                        /if}>{$vo.area_name}
                        </option>
                        {/volist}
                    </select>
                </div>
                <div class="col-xs-4">
                    <select class="form-control" name="city" id="city" onChange="getAreas(this.value,'district','3');">
                        <option value="">请选择市区</option>
                    </select>
                </div>
                <div class="col-xs-4">
                    <select class="form-control" name="district" id="district">
                        <option value="">请选择区县</option>
                    </select>
                </div>
            </div>
        </div> -->
        <input type="hidden" id="lat" name="lat" required="" lay-verify="lat" autocomplete="off" value="" class="layui-input"> 
        <input type="hidden" id="lng" name="lng" required="" lay-verify="lng" autocomplete="off" value="" class="layui-input"> 
        <!-- <input type="hidden" id="" name="id" required="" lay-verify="id" autocomplete="off" value="" class="layui-input"> -->
        <div class="form-group">
            <label for="address" class="col-sm-2 control-label">详细地址</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="address" id='address' placeholder="请输入详细地址">
            </div>
        </div>
        <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
        <div id="allmap" style="width:100%;height:400px"></div>
        <div class="form-group">
            <div class="col-xs-6">
                <label for="zhengmian_show" class="col-sm-2 control-label">负责人身份证正面</label>
                <div class="col-sm-10 img-upload">
                    <img src="__IMG__/jia.jpg"  width="100%" id="zhengmian_show">
                    <input type="file" onchange="upload('zhengmian')" id="zhengmian">
                </div>
            </div>
            <div class="col-xs-6">
                <label for="fanmian_show" class="col-sm-2 control-label">负责人身份证反面</label>
                <div class="col-sm-10 img-upload">
                    <img src="__IMG__/jia.jpg"   width="100%" id="fanmian_show">
                    <input type="file" onchange="upload('fanmian')" id="fanmian">
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="zhizhao" class="col-sm-2 control-label">营业执照</label>
            <div class="col-sm-10 img-upload">
                <img src="__IMG__/jia.jpg" accept="image/*" capture="camera" width="100%" id="zhizhao_show">
                <input type="file" onchange="upload('zhizhao')" id="zhizhao">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default btn-lg btn-block " id="sub">提交</button>
            </div>
        </div>
        <input type="hidden" id="zhengmian_path">
        <input type="hidden" id="fanmian_path">
        <input type="hidden" id="zhizhao_path">
    <!-- </form> -->
</div>
<style>
    .img-upload {
        position: relative;
    }

    .img-upload input {
        position: absolute;
        width: 100%;
        height: 100%;
        display: inline-block;
        opacity: 0;
        z-index: 999;
        left: 0;
        top: 0;
    }

</style>
<!-- <dl class="row">
       <dt class="tit">
         <label>是否商家配送</label>
       </dt>
       <dd class="opt">
         <div class="onoff">
           <label for="distribution" class="cb-enable <if condition="$admin_info[distribution] eq 1">selected</if>">是</label>
           <label for="is_free_shipping0" class="cb-disable <if condition="$admin_info[distribution] eq 0">selected</if>">否</label>
           <input id="distribution" name="distribution" value="1" type="radio" <if condition="$distribution eq 1"> checked="checked"</if>>
           <input id="distribution" name="distribution" value="0" type="radio" <if condition="distribution eq 0"> checked="checked"</if>>
         </div>
         <p class="notic">如果选是，自己配送，如果选否，系统自动选择寻找跑腿员配送</p>
       </dd>
     </dl>
<h3>HTML5 图片上传预览</h3>
<input id="img" type="file" accept="image/*" />
<div id="photo"></div> -->

</body>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=IM3qVUNdideEyOfLwivzmsHeCtjl0Xqk"></script>
<script>
    var lat = '31.132423';
    var lng = '121.35343';
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(lng, lat);
    map.centerAndZoom(point, 15);
    // var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
    //     {"input" : "suggestId"
    //     ,"location" : map
    // });
    // 百度地图API功能
    function G(id) {
        return document.getElementById(id);
    }

    var lat = '31.132423';
    var lng = '121.35343';
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(lng, lat);
    map.centerAndZoom(point, 15);
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
            // alert('您的位置：'+r.point.lng+','+r.point.lat);
            var pt = r.point;
            $('#lat').val(r.point.lat);
            $('#lng').val(r.point.lng);
            geoc.getLocation(pt, function(rs){
            var addComp = rs.addressComponents;
            // $('#address').html(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
            // alert(addComp.province+ addComp.city  + addComp.district  + addComp.street + addComp.streetNumber);
            $('#address').html(addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber);
            $('#address').val(addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber);
        });  
        }
        else {
            alert('failed'+this.getStatus());
        }        
    },{enableHighAccuracy: true})
    // var marker = new BMap.Marker(point);  // 创建标注
    // map.addOverlay(marker);               // 将标注添加到地图中
    // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
    map.enableScrollWheelZoom(true);  //开启鼠标滚轮缩放
    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
        {"input" : "address"
        ,"location" : map
    });

    ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
    var str = "";
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }    
        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
        
        value = "";
        if (e.toitem.index > -1) {
            _value = e.toitem.value;
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }    
        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
        G("searchResultPanel").innerHTML = str;
    });

    var myValue;
    ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
    var _value = e.item.value;
        myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
        
        setPlace();
    });

    function setPlace(){
        map.clearOverlays();    //清除地图上所有覆盖物
        function myFun(){
            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
            map.centerAndZoom(pp, 18);
            map.addOverlay(new BMap.Marker(pp));    //添加标注
        }
        var local = new BMap.LocalSearch(map, { //智能搜索
          onSearchComplete: myFun
        });
        local.search(myValue);
    }
    
    function remove_overlay(){
        map.clearOverlays();         
    }

    function showInfo(e){
        // alert(e.point.lng + ", " + e.point.lat);
        remove_overlay();
        var point = new BMap.Point(e.point.lng, e.point.lat);
        var marker = new BMap.Marker(point);
        map.addOverlay(marker);               // 将标注添加到地图中
        marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
        $('#lat').val(e.point.lat);
        $('#lng').val(e.point.lng);
        $('#address').html(data.data.result.formatted_address);  
        $('#address').val(data.data.result.formatted_address);
        //     $.ajax({
        //     type: 'POST',
        //     url: '/account/get-point',
        //     data: {
        //         lng : e.point.lng,
        //         lat : e.point.lat
        //     },
        //     dataType:"json",
        //     success :function(data){
        //         if(data.status){
        //             layer.msg('定位成功');
        //             $('#lat').val(data.data.result.location.lat);  
        //             $('#lng').val(data.data.result.location.lng);  
        //             $('#address').html(data.data.result.formatted_address);  
        //             $('#address').val(data.data.result.formatted_address);
        //         }else{
        //             layer.msg('定位失败');
        //         }
        //     }
        // });
    }
    var geoc = new BMap.Geocoder();    

    map.addEventListener("click", function(e){
        var pt = e.point;
        remove_overlay();
        var point = new BMap.Point(e.point.lng, e.point.lat);
        var marker = new BMap.Marker(point);
        map.addOverlay(marker);               // 将标注添加到地图中
        marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
        geoc.getLocation(pt, function(rs){
            var addComp = rs.addressComponents;
            $('#lat').val(e.point.lat);
            $('#lng').val(e.point.lng);
            $('#address').html(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
            $('#address').val(addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber);
        });        
    });
    // map.addEventListener("click", showInfo);
    $(function () {
//        $(document).on("change", '#province', function () {
//            getAreas($(this).val(), 'city', '2');
//            $('#city').empty().html("<option value='0'>请选择商品分类</option>");
//        });
//        $(document).on("change", '#city', function () {
//            getAreas($(this).val(), 'district', '2');
//            $('#city').empty().html("<option value='0'>请选择商品分类</option>");
//        })
    })





    // function getAreas(id, next, select_id) {
    //     var url = '/Common/getArea';
    //     $.ajax({
    //         type: "POST",
    //         url: url,
    //         data: {id: id},
    //         dataType: 'json',
    //         error: function (request) {
    //             alert("服务器繁忙, 请联系管理员!");
    //             return;
    //         },
    //         success: function (ret) {
    //             if (ret.status) {
    //                 console.log(ret.data)
    //                 if (ret.data) {
    //                     var html = '<option >请选择区县</option>';
    //                     $.each(ret.data, function (k, v) {
    //                         html += "<option value=" + v.area_id + ">" + v.area_name + "</option>";
    //                     });
    //                     $('#' + next).html(html);
    //                 }
    //             }
    //         }
    //     });
    // }

    function upload(name) {
        var imgData = new FormData();
        imgData.append(name, $('#' + name)[0].files[0]);
        imgData.append('name', name);
        $.ajax({
            url: '/Common/upload',
            data: imgData,
            type: 'post',
            processData: false,
            contentType: false,
            beforeSend: function(){
                $(".loadEffect").css('display','block'); 
                },
            success: function (ret) {
                if (ret.status) {
                    $(".loadEffect").css('display','none'); 
                    $('#' + name + '_show').attr('src', ret.data.rawUrl_path);
                    $('#' + name + '_path').val(ret.data.rawUrl);
                }
            }
        })
    }


       $('#sub').click(function(){
            // var province = $('#province').val();
            // var city = $('#city').val();
            // var district = $('#district').val();
            var manage = $('#manage').val();
            var shopname = $('#shopname').val();
            var mobile = $('#mobile').val();
            var category_id = $('#category_id').val();
            var address = $('#address').val();
            var zhengmian = $('#zhengmian_path').val();
            var fanmian = $('#fanmian_path').val();
            // var fanmian = $('#fanmian_path').val();
            var zhizhao = $('#zhizhao_path').val();
            var lat = $('#lat').val();
            var lng = $('#lng').val();
            var idNumber = $('#idNumber').val();
            if(manage || shopname || mobile || category_id || address || zhengmian || fanmian || zhizhao || lat || lng || idNumber){
                $.ajax({
                  url:'/Seller/toAuth',
                  data:{lat:lat,lng:lng,manage:manage, shopname:shopname, mobile:mobile, category_id:category_id, address:address, sfzzm:zhengmian, sfzfm:fanmian, license:zhizhao,idNumber:idNumber},
                  type: 'post',
                  dataType:'json',
                  // processData: false,
                  // contentType: false,
                  success: function (ret) {
                      if (ret.status) {
                        alert('提交成功');
                        location.reload();
                      }else{
                        alert(ret.msg);
                    }
                  },
               })
            }
       })
</script>
</html>